import React from 'react'
import { connect } from 'dva'

import Header from '../components/Header'
import Nav from '../components/Nav'
import CartItem from '../components/CartItem'
import CartBar from '../components/CartBar'


class Index extends React.Component {

    renderCartItems = () => {
        const { cart } = this.props
        
        return (
            <div className='cartItemList' >
                {
                    cart.cart.list.map(item => (
                        <CartItem 
                            key={item._id}
                            data={item} 
                        />
                    ))
                }
            </div>
        )
    }

    render() {
        console.log(this.props.cart)
        return (
            <div>
                <Header />
                {this.renderCartItems()}
                <CartBar />
                <Nav />
            </div>
        )
    }
}

const mapState = state => ({
    cart: state.cart
})

export default connect(mapState)(Index)
